<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword"
          content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
    <link rel="shortcut icon" href="img/favicon.png">
    <title>CoreUI - Open Source Bootstrap Admin Template</title>
    <link href="vendors/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/css/simple-line-icons.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>


<body>

<table class="table table-responsive-sm" hidden>
    <thead>
    <tr>
        <th>班级</th>
        <th>教师</th>
        <th>创建时间</th>
        <th>内容</th>
    </tr>
    </thead>
    <tbody id="vue-test">
    <tr v-for="(object, index) in array" track-by="$index">
        <td>{{object.classroom.className}}, {{index}}</td>
        <td>{{object.teacher.name}}</td>
        <td>{{object.modifyDate}}</td>
        <td>{{object.content}}</td>
    </tr>
    </tbody>
</table>

<div hidden>
    <input type="text" id="name" name="name" value="123" title="aaa"/>
    <input type="file" id="upload" name="file">
    <button onclick="test()">提交</button>
</div>
<div id="vue-test-2" class="container-fluid mt-5">
    <template v-show="show">
        <table hidden class="table table-responsive-sm table-bordered table-striped table-sm text-center">
            <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th v-for="(record, index) in records" :key="record.id">{{record.createDate}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in students.length" :key="students[row-1].id">
                <td>{{students[row-1].username}}</td>
                <td>{{students[row-1].name}}</td>
                <td v-for="column in records.length" :key="records[column-1].attendances[row-1].id">
                    {{records[column-1].attendances[row-1].attendance}}
                </td>
            </tr>
            </tbody>
        </table>
</template>
    <div class="form-group" style="height: 100px; overflow: auto; overflow-x: hidden; width: 100px">


        asdfa
        aaaaaaaaa
        aaaaaaaaa
        aaaaaaa
        asadf
        aaaaaaaaa
    </div>
</div>
<script src="vendors/js/jquery.min.js"></script>
<script src="js/qianduan/vue.js"></script>
<script>

    var students = [
        {
            username: '2015061122',
            name: 'mr-pro'
        },
        {
            username: '2015061133',
            name: 'mr-lin'
        }
    ];

    var records = [
        {
            id: '1sdqe12e12e1221',
            createDate: '2018-04-23 10:23:23',
            customerName: '',
            attendances: [
                {
                    "id": "addssssaaaa",
                    "teacher": {
                        "name": "XXX",
                        "address": "广商教师村一号街道1",
                        "phone": "123456789"
                    },
                    "record": {
                        "id": "1sdqe12e12e1221",
                        "createDate": "2018-04-23 10:23:23",
                        "customerName": null
                    },
                    "modifyDate": null,
                    "remark": "dd",
                    "attendance": "late"
                },
                {
                    "id": "dsdssd",
                    "teacher": {
                        "name": "XXX",
                        "address": "广商教师村一号街道1",
                        "phone": "123456789"
                    },
                    "record": {
                        "id": "1sdqe12e12e1221",
                        "createDate": "2018-04-23 10:23:23",
                        "customerName": null
                    },
                    "modifyDate": null,
                    "remark": "dd",
                    "attendance": "ok"
                }
            ]
        },
        {
            id: '41xasdf2324asaf',
            createDate: '2018-05-23 11:24:23',
            customerName: 'weww',
            attendances: [
                {
                    "id": "dadffsd",
                    "teacher": {
                        "name": "XXX",
                        "address": "广商教师村一号街道1",
                        "phone": "123456789"
                    },
                    "record": {
                        "id": "41xasdf2324asaf",
                        "createDate": "2018-05-23 11:24:23",
                        "customerName": null
                    },
                    "modifyDate": null,
                    "remark": "dd",
                    "attendance": "ok"
                },
                {
                    "id": "dddd",
                    "teacher": {
                        "name": "XXX",
                        "address": "广商教师村一号街道1",
                        "phone": "123456789"
                    },
                    "record": {
                        "id": "41xasdf2324asaf",
                        "createDate": "2018-05-23 11:24:23",
                        "customerName": null
                    },
                    "modifyDate": null,
                    "remark": "daadfa",
                    "attendance": "parse"
                }
            ]
        }
    ];
</script>

<script>
    /*var vue_test;
    $.ajax({
        url: '/common/notices',
        type: 'GET',
        success: function (data) {
            vue_test = new Vue({
                el: '#vue-test',
                data:{array:data.content}
            });
            console.log(data)
        },
        error: function (data) {
            console.log(data)
        }
    })*/

    /* function test(){
         var formData = new FormData();
         var name = $("#name").val();
         formData.append("file", $("#upload")[0].files[0]);

         $.ajax({
             url: '/test02',
             type: 'PUT',
             processData: false,
             contentType : false,
             data:formData,
             success: function (data) {
                 console.log(data)
             },
             error: function (data) {
                 console.log(data)
             }
         })
     }*/

    var vue_test_2 = new Vue({
        el: '#vue-test-2',
        data: {
            records: records,
            students: students,
            show: false
        }
    });


</script>
</body>
</html>